<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        #febs-index .welcome-info {
            border: 1px solid #f1f1f1;
            margin-bottom: .5rem;
            padding: .5rem;
        }

        #febs-index .welcome-info-wrapper {
            padding: .2rem;
            display: inline-block
        }

        #febs-index .welcome-info-wrapper .user-header {
            display: inline-block;
            vertical-align: middle
        }

        #febs-index .welcome-info-wrapper .user-header img {
            width: 5rem;
            margin: .5rem 1rem;
            border-radius: 50%
        }

        #febs-index .welcome-info-wrapper .user-info {
            display: inline-block;
            vertical-align: middle
        }

        #febs-index .welcome-info-wrapper .user-info .random-message {
            font-size: 1rem;
            margin-bottom: .2rem;
            max-width: 21rem
        }

        #febs-index .welcome-info-wrapper .user-info .user-dept, #febs-index .welcome-info-wrapper .user-info .user-login-info {
            color: rgba(0, 0, 0, 0.45);
        }

        #febs-index .login-count-table {
            width: 100%;
            margin: 1rem;
        }

        #febs-index .login-count-table .count {
            padding-top: .8rem;
            font-size: 1rem;
            font-weight: 600;
            color: #1890ff
        }

        #febs-index .project-table {
            padding: .5rem;
            border: 1px solid #f1f1f1;
            width: 100%
        }

        #febs-index .project-table-td {
            padding: .5rem 0.7rem;
            border: 1px solid #f1f1f1;
        }

        #febs-index .project-table-td a {
            color: #42b983;
            font-size: .9rem;
            font-weight: 600;
        }

        #febs-index .project-desc {
            color: rgba(0, 0, 0, 0.45);
        }

        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 140%;
            background-color: gray;
            text-align: left;
            text-indent: 2em;
            border-radius: 0.5em;
            padding: 0.2em 0.1em;
            color: #ff0;
            top: 1.5em;
            left: 1em;
            /* 定位 */
            position: absolute;
            z-index: 1;
        }

        .panel-body {
            padding: 10px;
            padding-bottom: 0px;
        }

        .panel-body ul {
            overflow: hidden;
            padding: 0;
            margin: 0px;
            margin-top: -5px;
        }

        .panel-body ul li {
            line-height: 27px;
            list-style-type: none;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .panel-body ul li .time {
            color: #a1a1a1;
            float: right;
            padding-right: 5px;
        }

        .dashboard-stats {
            float: left;
            width: 20%;
        }

        .dashboard-stats2 {
            float: left;
            width: 25%;
        }

        .dashboard-stats-item {
            position: relative;
            overflow: hidden;
            color: #fff;
            cursor: pointer;
            height: 80px;
            margin-right: 25px;
            margin-bottom: 10px;
            padding: 20px 20px;
            display: flex;
        }

        .dashboard-stats-item .m-top-none {
            margin-top: 2px;
        }

        .dashboard-stats-item h2 {
            font-size: 35px;
            font-family: inherit;
            line-height: 1.1;
            font-weight: 500;
        }

        .dashboard-stats-item h5 {
            font-size: 15px;
            font-family: inherit;
            margin-top: 3px;
            line-height: 1.1;
        }

        .dashboard-stats-item h52 {
            font-size: 18px;
            font-family: inherit;
            margin-top: 50px;
            line-height: 1.1;
            position: absolute;
            bottom: 25px;
        }

        .dashboard-stats-item .stat-icon {
            position: absolute;
            top: 25px;
            right: 10px;
            font-size: 20px;
            opacity: .3;
        }

        .dashboard-stats-item .stat-icon2 {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 30px;
            opacity: .3;
        }

        .dashboard-stats i.fa.stats-icon {
            width: 50px;
            padding: 20px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            height: 50px;
            border-radius: 10px;
        }

        .dashboard-stats2 i.fa.stats-icon {
            width: 50px;
            padding: 20px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            height: 50px;
            border-radius: 10px;
        }

        #using .dashboard-stats-item {
            flex-direction: column;
        }

        .dashboard-stats-item {
            border-radius: 5px;
        }

        .dashboard-stats-item h5 {
            margin-top: 15px;
        }

        .panel-body .dashboard-stats-item {
            background: #fff;
            color: #000;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        #using .dashboard-stats-item {
            color: #857e7e;
            height: calc(100vh - 650px);
            justify-content: center;
            position: relative;
        }

        .index_total_img {
            height: 60px;
            width: 60px;
        }

        #welcome-message {
            font-size: 20px;
            font-weight: bold;
            padding-bottom: 20px;
        }
    </style>
</head>
<div class="febs-container">
    <div class="layui-fluid layui-anim febs-anim-up febs-body" id="febs-index" lay-title="系统首页">
    </div>
</div>

<body  style="overflow: hidden;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<table style="width:100%;height:100%;">
    <tr style="height: calc(80% - 400px); background: url(/febs/images/picture/3.png);background-size: 100% 100%;">
        <td colspan="2" style="padding: 20px;">
            <div class="panel-body">
                <div id="welcome-message"></div>
                <div class="dashboard-stats tooltip">
                    <div class="dashboard-stats-item">
                        <div class="index_total_img"
                             style="background: url(/febs/images/picture/daishenpi.png);background-size: 100% 100%;"></div>
                        <div>
                            <h2 class="m-top-none"><span id="t1"></span></h2>
                            <h5>待审批任务/项目</h5>
                        </div>
                    </div>
                </div>

                <div class="dashboard-stats tooltip">
                    <div class="dashboard-stats-item">
                        <div class="index_total_img"
                             style="background: url(/febs/images/picture/yishenpi.png);background-size: 100% 100%;"></div>
                        <div>
                            <h2 class="m-top-none"><span id="t2"></span></h2>
                            <h5>已审批任务/项目</h5>
                        </div>
                    </div>
                </div>

                <div class="dashboard-stats tooltip">
                    <div class="dashboard-stats-item">
                        <div class="index_total_img"
                             style="background: url(/febs/images/picture/yipaiqi.png);background-size: 100% 100%;"></div>
                        <div>
                            <h2 class="m-top-none"><span id="t3"></span></h2>
                            <h5>已排期任务/项目</h5>
                        </div>
                    </div>
                </div>

                <div class="dashboard-stats tooltip">
                    <div class="dashboard-stats-item">
                        <div class="index_total_img"
                             style="background: url(/febs/images/picture/shiyanzhong.png);background-size: 100% 100%;"></div>
                        <div>
                            <h2 class="m-top-none"><span id="t4"></span></h2>
                            <h5>试验中任务/项目</h5>
                        </div>
                    </div>
                </div>

                <div class="dashboard-stats tooltip">
                    <div class="dashboard-stats-item" style="margin-right: 0px;">
                        <div class="index_total_img"
                             style="background: url(/febs/images/picture/yiwancheng.png);background-size: 100% 100%;"></div>
                        <div>
                            <h2 class="m-top-none"><span id="t5"></span></h2>
                            <h5>已完成任务/项目</h5>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>

    <tr style="height: 20%">
        <td colspan="2">
            <div class="panel-body" id="using" style="display: flex;flex-direction: row; overflow-x: auto;"></div>
        </td>
    </tr>
    <tr>
        <td width="50%">
            <div style="position: absolute;display: inline-block;left:20%;z-index:9999999;"
                 class="tooltip">
                <!--                <span class="tooltiptext">选择查看不同资源的预约天数情况</span>-->
                <select id="resource"></select>
            </div>
            <div style="margin-left: 10px;position: absolute;display: inline-block;left:30%;z-index:9999999;"
                 class="tooltip">
                <!--                <span class="tooltiptext">切换X轴显示维度</span>-->
                <select id="weidu">
                    <option value="week" selected>周视图</option>
                    <option value="month">月视图</option>
                </select>
            </div>
            <div id="myChart001" style="width:100%;height: 350px;"></div>
        </td>
        <td>
            <div id="myChart003" style="width: 100%; height: 350px;"></div>
            <div id="myChart002" style="width: 100%; height: 350px;display:none"></div>
        </td>
    </tr>

</table>
<th:block th:include="include::foot"/>
<script src="/plugins/echarts/echarts.min.js"></script>
<script src="/febs/lay/extends/apexcharts.min.js"></script>
<script src="/plugins/homeList.js"></script>
<script type="text/javascript">

    //
    var colors = ['#00BFFF', '#DAA520'];
    // 历史工作量统计
    var myChart002 = echarts.init(document.getElementById('myChart002'));
    // 指定图表的配置项和数据
    var option = {
        color: ['#00BFFF', '#DAA520'],
        title: {
            text: '历史工作量统计'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            x: 'center',
            y: 'top',
            data: ['任务', '项目']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2023/12', '2024/01', '2024/02', '2024/03', '2024/04', '2024/05', '2024/06', '2024/07', '2024/08', '2024/09', '2024/10', '2024/11']
        },
        yAxis: [{
            type: 'value',
            min: 0,
            interval: 5,
            axisLine: {
                lineStyle: {
                    color: colors[0]
                }
            },
            axisLabel: {
                formatter: '{value} '
            }
        },
            {
                type: 'value',
                min: 0,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisLabel: {
                    formatter: '{value} '
                }
            }],
        series: [
            {
                name: '任务',
                type: 'line',
                data: [50, 56, 33, 43, 56, 44, 65, 44, 45, 65, 74, 35],
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                }
            },
            {
                name: '项目',
                type: 'line',
                yAxisIndex: 1,
                data: [15, 20, 13, 18, 20, 22, 33, 23, 11, 22, 35, 8],
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart002.setOption(option);
</script>
<!--<script th:src="@{homeList.js(v=1)}"></script>-->
</body>
</html>

<!--<script data-th-inline="javascript" type="text/javascript">-->
<!--    layui.use(['apexcharts', 'febs', 'jquery', 'util'], function () {-->
<!--        var $ = layui.jquery,-->
<!--            util = layui.util,-->
<!--            $view = $('#febs-index'),-->
<!--            febs = layui.febs;-->


<!--    });-->
<!--</script>-->